﻿
@{
    ViewBag.Title = "SafetyIndexFormAdd";
    Layout = "~/Views/Shared/_LayoutMain.cshtml";
}

@section css{
    <link href="~/Assets/css/lib/bootstrap-select.css" rel="stylesheet" />
    <link href="~/Assets/css/lib/fileinput.css" rel="stylesheet" />
    <link href="~/Assets/css/lib/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <style>
        .required {
            color: red;
        }

        .mapcontent {
        }

        .content {
            width: 100%;
            position: fixed;
        }

        .div-relative {
            position: relative;
        }

        .detail_div {
            background-color: rgba(0,0,0,0.5);
            color: white;
            border-radius: 4px;
            z-index: 999;
            position: fixed;
            width: 300px;
        }

        .detail_text {
            display: none;
            font-size: 17px;
        }

        .div-a {
            position: absolute;
        }

        .factory {
            color: white;
        }

        .factory-active {
            color: aqua;
            font-weight: bold;
        }

            .factory-active:hover {
                color: white;
                font-weight: bold;
            }

        .menu-active {
            color: aqua;
            font-weight: bold;
        }
    </style>
}
<header id="topbar" style="position:fixed;">
    <div class="topbar-left">
        <ol class="breadcrumb">
            <li class="crumb-active">
                <a>数据可视化</a>
            </li>
            <li class="crumb-trail">主页</li>
        </ol>
    </div>
</header>
<div class="content" style="" ng-controller="HomeController" ng-init="FactoryArea=1;Type=1; GetLocationList(FactoryArea,Type);">

    <div class="mapcontent">
        <div style="background-color: rgba(0,0,0,0.5);color: #FFF;font-size:12px; width:600px; height:60px; font-size:15px; border-radius:4px;position:absolute;left:50px;top:80px;padding:2px;padding-left:30px;">
            <div class="zhuashou" style="position:absolute;top:755px;left:140px; color:white;font-weight:bold;font-size:20px;z-index:99;">
                <a class="factory" ng-class="{'factory-active' :FactoryArea==1}" style="cursor:pointer;" ng-click="GetLocationList(1,Type);">浦东</a>&nbsp;&nbsp;
                <a class="factory" ng-class="{'factory-active' :FactoryArea==2}" style="cursor:pointer;" ng-click="GetLocationList(2,Type);">大场</a>
            </div>
            <div style="float:left;text-align:center;margin-left:0px;cursor:pointer;">
                <a style="text-align:center;color:white;font-family:微软雅黑;font-weight:bold;" ng-click="GetLocationList(FactoryArea,1);">
                    <img src="~/Assets/Emergency/img/iconimg.png" height="33" />
                    <p ng-class="{'menu-active':Type_1}">厂房</p>
                </a>
            </div>
            <div style="float: left; text-align: center; margin-left: 20px; cursor: pointer;">
                <a style="text-align:center;color:white;font-family:微软雅黑;font-weight:bold;" ng-click="GetLocationList(FactoryArea,2);">
                    <img src="~/Assets/Emergency/img/xiaofang.png" height="33" />
                    <p ng-class="{'menu-active':Type_2}">消防</p>
                </a>
            </div>
            <div style="float: left; text-align: center; margin-left: 20px; cursor: pointer;">
                <a style="text-align:center;color:white;font-family:微软雅黑;font-weight:bold;" ng-click="GetLocationList(FactoryArea,3);">
                    <img src="~/Assets/Emergency/img/aed.png" height="33" />
                    <p ng-class="{'menu-active':Type_3}">AED</p>
                </a>
            </div>
            <div style="float: left; text-align: center; margin-left: 20px; cursor: pointer;">
                <a style="text-align:center;color:white;font-family:微软雅黑;font-weight:bold;" ng-click="GetLocationList(FactoryArea,4);">
                    <img src="~/Assets/Emergency/img/susan.png" height="33" />
                    <p ng-class="{'menu-active':Type_4}">疏散</p>
                </a>
            </div>
            <div style="float: left; text-align: center; margin-left: 20px; cursor: pointer;">
                <a style="text-align:center;color:white;font-family:微软雅黑;font-weight:bold;" ng-click="GetLocationList(FactoryArea,5);">
                    <img src="~/Assets/Emergency/img/zhanfang.png" height="33" />
                    <p ng-class="{'menu-active':Type_5}">站房</p>
                </a>
            </div>
            <div style="float: left; text-align: center; margin-left: 20px; cursor: pointer;">
                <a style="text-align:center;color:white;font-family:微软雅黑;font-weight:bold;" ng-click="GetLocationList(FactoryArea,6);">
                    <img src="~/Assets/Emergency/img/fengkong.png" height="33" />
                    <p ng-class="{'menu-active':Type_6}">风控</p>
                </a>
            </div>

            <div style="float: left; text-align: center; margin-left: 20px; cursor: pointer;">
                <a style="text-align:center;color:white;font-family:微软雅黑;font-weight:bold;" ng-click="GetLocationList(FactoryArea,7);">
                    <img src="~/Assets/Emergency/img/weixiandian.png" height="33" />
                    <p ng-class="{'menu-active' :Type_7}">危险点</p>
                </a>
            </div>

            <div style="float: left; text-align: center; margin-left: 20px; cursor: pointer;">
                <a style="text-align:center;color:white;font-family:微软雅黑;font-weight:bold;" ng-click="GetLocationList(FactoryArea,8);">
                    <div style="margin-left:10px; width: 32px;height:34px; background-image: url(../../Assets/Emergency/img/tool.png);background-position:right;"></div>
                    <p ng-class="{'menu-active' :Type_8}">职业健康</p>
                </a>
            </div>
            <div style="float: left; text-align: center; margin-left: 20px; cursor: pointer;">
                <a style="text-align:center;color:white;font-family:微软雅黑;font-weight:bold;" ng-click="GetLocationList(FactoryArea,9);">
                    <img src="~/Assets/Emergency/img/weixianzuoye.png" height="33" />
                    <p ng-class="{'menu-active' :Type_9}">危险作业</p>
                </a>
            </div>
        </div>

        <img src="~/Bussiness/img/pvgmap.jpg" style="width:100%" ng-show="FactoryArea==1" />
        <img src="~/Bussiness/img/dcArea.jpg" style="width:100%" ng-show="FactoryArea==2" />
        <div ng-if="x.Type==1" ng-repeat="x in LocationList" class="div-a" ng-style="{'left':x.X+'%','top':x.Y+'%'}">
            <div ng-mouseover="doMapMouse('struct',x.Id)" ng-mouseleave="MouseLeave('struct',x.Id)" style="font-size:12px; border-radius:4px;cursor:pointer;">
                <a class="titlediv ng-binding" style="color:gainsboro;background-color:rgb(0,0,0,0.5);padding:5px;border-radius:2px;" title="">{{x.Simple}}</a>
            </div>
            <div class="detail_div">
                <div id="struct{{x.Id}}" class="detail_text">
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{x.LocationName}}</span></span><br />
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>结构：</b><span>{{x.Struct}}</span></span><br />
                    <span style="top: -2px; position: relative; padding: 5px;"><span class="glyphicon glyphicon-play"> </span><b>面积：</b><span>{{x.Square}}m²</span></span><br />
                </div>
            </div>
        </div>
        <div ng-if="x.Type==2" ng-repeat="x in LocationList" class="div-a" ng-style="{'left':x.X+'%','top':x.Y+'%'}">
            <div ng-mouseover="doMapMouse('struct',x.Id)" ng-mouseleave="MouseLeave('struct',x.Id)" style="font-size:12px; border-radius:4px;cursor:pointer;">
                <a class="titlediv ng-binding" style="color:gainsboro;background-color:rgb(0,0,0,0.5);padding:5px;border-radius:2px;" title="">{{x.Simple}}</a>
            </div>
            <div class="detail_div">
                <div id="struct{{x.Id}}" class="detail_text">
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{x.LocationName}}</span></span><br />
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>归口管理部门：</b><span>{{x.Department}}</span></span><br />
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>现场负责人：</b><span>{{x.Responsible}}</span></span><br />
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>联系方式：</b><span>{{x.Phone}}</span></span><br />
                </div>
            </div>
        </div>
        <div ng-if="x.Type==3" ng-repeat="x in LocationList" class="div-a" ng-style="{'left':x.X+'%','top':x.Y+'%'}">
            <div ng-mouseover="doMapMouse('struct',x.Id)" ng-mouseleave="MouseLeave('struct',x.Id)" style="font-size:12px; border-radius:4px;cursor:pointer;">
                <a class="titlediv ng-binding" style="color:gainsboro;background-color:rgb(0,0,0,0.5);padding:5px;border-radius:2px;" title="">{{x.Simple}}</a>
            </div>
            <div class="detail_div">
                <div id="struct{{x.Id}}" class="detail_text">
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{x.LocationName}}</span></span><br />
                </div>
            </div>
        </div>
        <div ng-if="x.Type==4" ng-repeat="x in LocationList" class="div-a" ng-style="{'left':x.X+'%','top':x.Y+'%'}">
            <div ng-mouseover="doMapMouse('struct',x.Id)" ng-mouseleave="MouseLeave('struct',x.Id)" style="font-size:12px; border-radius:4px;cursor:pointer;">
                <p  style="margin:5px auto;width:30px;"><img src="~/Bussiness/img/shusanicon.png" width="30"/></p>
                <a class="titlediv ng-binding" style="color:gainsboro;background-color:rgb(0,0,0,0.5);padding:5px;border-radius:2px;" title="">{{x.Simple}}</a>
            </div>
            <div class="detail_div">
                <div id="struct{{x.Id}}" class="detail_text">
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{x.LocationName}}</span></span><br />
                </div>
            </div>
        </div>
        <div ng-if="x.Type==5" ng-repeat="x in LocationList" class="div-a" ng-style="{'left':x.X+'%','top':x.Y+'%'}">
            <div ng-mouseover="doMapMouse('struct',x.Id)" ng-mouseleave="MouseLeave('struct',x.Id)" style="font-size:12px; border-radius:4px;cursor:pointer;">
                <a class="titlediv ng-binding" style="color:gainsboro;background-color:rgb(0,0,0,0.5);padding:5px;border-radius:2px;" title="">{{x.Simple}}</a>
            </div>
            <div class="detail_div">
                <div id="struct{{x.Id}}" class="detail_text">
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{x.LocationName}}</span></span><br />
                </div>
            </div>
        </div>
        <div ng-if="x.Type==6" ng-repeat="x in LocationList" class="div-a" ng-style="{'left':x.X+'%','top':x.Y+'%'}">
            <div ng-mouseover="doMapMouse('Risk',x.Id)" ng-mouseleave="MouseLeave('Risk',x.Id)" style="font-size:12px; border-radius:4px;cursor:pointer;">
                <a ng-href="{{x.FilePath}}" target="_blank" class="titlediv ng-binding" style="color:gainsboro;background-color:rgb(0,0,0,0.5);padding:5px;border-radius:2px;" title="">{{x.Simple}}</a>
            </div>
            <div class="detail_div">
                <div id="Risk{{x.Id}}" class="detail_text">
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{x.LocationName}}</span></span><br />
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>危险等级：</b><span>{{x.Level}}</span></span><br />
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>附件：</b><span>{{x.FileName}}</span></span><br />
                </div>
            </div>
        </div>

        <div ng-if="x.Type==7" ng-repeat="x in LocationList" class="div-a" ng-style="{'left':x.X+'%','top':x.Y+'%'}">
            <div ng-mouseover="doMapMouse('DangerPlace',x.Id)" ng-mouseleave="MouseLeave('DangerPlace',x.Id)" style="font-size:12px; border-radius:4px;cursor:pointer;">
                <a class="titlediv ng-binding" style="color:gainsboro;background-color:rgb(0,0,0,0.5);padding:5px;border-radius:2px;" title="">{{x.Simple}}-{{x.Level}}危险点</a>
            </div>
            <div class="detail_div">
                <div id="DangerPlace{{x.Id}}" class="detail_text">
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{x.LocationName}}</span></span><br />
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>设备：</b><span>{{x.SourceName}}</span></span><br />
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>危险等级：</b><span>{{x.Level}}</span></span><br />
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>数量：</b><span>{{x.Quantity}}</span></span><br />
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>责任部门：</b><span>{{x.Department}}</span></span><br />
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>现场责任人：</b><span>{{x.Responsible}}-{{x.Phone}}</span></span><br />
                </div>
            </div>
        </div>
        <div ng-if="x.Type==8" ng-repeat="x in LocationList" class="div-a" ng-style="{'left':x.X+'%','top':x.Y+'%'}">
            <div ng-mouseover="doMapMouse('OHS',x.Id)" ng-mouseleave="MouseLeave('OHS',x.Id)" style="font-size:12px; border-radius:4px;cursor:pointer;">
                <a class="titlediv ng-binding" style="color:gainsboro;background-color:rgb(0,0,0,0.5);padding:5px;border-radius:2px;" title="">{{x.Simple}}</a>
            </div>
            <div class="detail_div">
                <div id="OHS{{x.Id}}" class="detail_text">
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{x.LocationName}}</span></span><br />
                    <div ng-repeat=" y in x.ResultList">
                        <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>点位：</b><span>{{y.Point}}{{y.Harm}}-{{y.Result}}</span></span><br />
                    </div>

                </div>
            </div>
        </div>
        <div ng-if="x.Type==9" ng-repeat="x in LocationList" class="div-a" ng-style="{'left':x.X+'%','top':x.Y+'%'}">
            <div ng-mouseover="doMapMouse('struct',x.Id)" ng-mouseleave="MouseLeave('struct',x.Id)" style="font-size:12px; border-radius:4px;cursor:pointer;">
                <a class="titlediv ng-binding" style="color:gainsboro;background-color:rgb(0,0,0,0.5);padding:5px;border-radius:2px;" title="">{{x.Simple}}</a>
            </div>
            <div class="detail_div">
                <div id="struct{{x.Id}}" class="detail_text">
                    <span style="top: -2px; position: relative;padding:5px;"><span class="glyphicon glyphicon-play"> </span><b>位置：</b><span>{{x.LocationName}}</span></span><br />
                </div>
            </div>
        </div>
    </div>
</div>



@section Js{
    <script src="~/bussiness/js/pg/Home.js"></script>
    <script src="~/bussiness/js/libs/moment.min.js"></script>
    <script src="~/bussiness/js/libs/locales/date/zh-cn.js"></script>
    <script src="~/bussiness/js/libs/bootstrap-datetimepicker.min.js"></script>
    <script src="~/bussiness/js/libs/angularjs-datepicker.js"></script>
    <script src="~/bussiness/js/libs/fileinput.js"></script>
    <script src="~/bussiness/js/libs/zh.js"></script>
    <script>
        $(document).ready(function () {
            document.getElementById("toggle_sidemenu_l").click();
        });

    </script>
}


